/**
 * @Author: easten
 * @Created: 2024-09-04 01:20:46
 * @Description:
 *
 */
import { ApiDevice } from "_common/api/iot";
import { IotGreaseRecord } from "_common/entity";
import { AxiosInstance } from "axios";
import { TableTitle } from "components";
import dayjs from "dayjs";
import React, { useEffect, useState } from "react";
import { PrimaryTableCol, Table } from "tdesign-react";
type GreaseRecordTableProps = {
  deviceCode?: number;
  axios: AxiosInstance;
  height?: number;
};
const GreaseRecordTable: React.FC<GreaseRecordTableProps> = (
  props: GreaseRecordTableProps
) => {
  const { deviceCode, axios } = props;

  const [dataSource, setDataSource] = useState<IotGreaseRecord[]>([]);

  const api = new ApiDevice(axios);

  useEffect(() => {
    api.getGreaseRecord(deviceCode).then((res) => {
      if (res && res.code == 200 && res.data) {
        setDataSource(res.data);
      }
    });
    return () => {};
  }, [deviceCode]);

  // 表格定义
  const columns: PrimaryTableCol<IotGreaseRecord>[] = [
    {
      align: "left",
      width: 80,
      ellipsis: true,
      colKey: "orderNo",
      title: "序号",
      cell: ({ rowIndex }) => {
        return rowIndex + 1;
      },
    },
    {
      align: "center",
      ellipsis: true,
      colKey: "deviceCode",
      title: "设备ID",
    },
    {
      align: "center",
      ellipsis: true,
      colKey: "isSendSuccess",
      title: "是否下发成功",
      cell: ({ row }) => {
        return row.isSendSuccess ? "是" : "否";
      },
    },
    {
      align: "center",
      ellipsis: true,
      colKey: "sendTime",
      title: "指令下发时间",
      cell: ({ row }) => {
        return row.sendTime
          ? dayjs(row.sendTime).format("YYYY-MM-DD HH:mm:ss")
          : "---";
      },
    },
    {
      align: "center",
      ellipsis: true,
      colKey: "isComplete",
      title: "是否加脂成功",
      cell: ({ row }) => {
        return row.isComplete ? "是" : "否";
      },
    },
    {
      align: "center",
      ellipsis: true,
      colKey: "completeTime",
      title: "加脂完成时间",
      cell: ({ row }) => {
        return row.completeTime
          ? dayjs(row.completeTime).format("YYYY-MM-DD HH:mm:ss")
          : "---";
      },
    },
    {
      align: "center",
      ellipsis: true,
      colKey: "operatorName",
      width: 120,
      title: "操作人",
      cell: ({ row }) => {
        return row.operatorName ?? "---";
      },
    },
  ];

  // 导出加脂记录
  const exportRecord = () => {};

  return (
    <div>
      <div className="mt-5 mb-3 flex justify-between">
        <TableTitle text="手动加脂记录" />
        {/*  <Button onClick={exportRecord} size="small" icon={<FileExcelIcon />}>
          导出记录
        </Button> */}
      </div>
      <Table<IotGreaseRecord>
        bordered
        size="small"
        data={dataSource}
        columns={columns}
        rowKey="id"
        verticalAlign="middle"
        hover
        maxHeight={520}
        scroll={{
          type: "lazy",
        }}
      />
    </div>
  );
};
export default GreaseRecordTable;
